<template>
  <div class="user">
   <!-- 模态框 -->
    <el-dialog
      title="新增用户"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div class="content">
       <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
         <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
         </el-select>
        </el-form-item>

        <el-form-item label="出生日期" prop="date">
         <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
         </el-col>
        </el-form-item>

        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="AddOrEdit">确认</el-button>
      <el-button type="info" @click="form={}">重置</el-button>
      </div>
     
    </el-dialog>
   <!-- 新增按钮 -->
   <div class="header">
      <el-button type="primary" @click="addUser" >
       + 新增
      </el-button>

       <el-button type="danger" icon="el-icon-delete" @click="buchDelete">
         批量删除
       </el-button>

      <div class="search"> 
        <el-button @click="search" icon="el-icon-search" type="primary">查询</el-button>
       <!-- 搜索框 -->
      <el-input placeholder="请输入用户信息查询" 
       prefix-icon="el-icon-search" 
       v-model="searchinfo" clearable>
      </el-input>
      </div>
      
   </div>
  
    <!-- 表单数据 -->
    <el-table
      stripe
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      
      >
          <!-- 批量删除框 -->
       <el-table-column
       
        width="55" 
         >
        <template slot-scope="scope" ><div class="checkbox" @click="addBuch(scope.$index,scope.row)"
          :id="scope.$index"></div></template>
      </el-table-column>
      <!-- 索引 -->
     <el-table-column
      type="index"
      :index="1" label="序号">
     </el-table-column>

     
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
        <!-- <template slot-scope="scope">{{ scope.row.name }}</template> -->
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="120">
        <template slot-scope="scope">{{  scope.row.sex =='0' ?'女':'男' }}</template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="出生日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="120"
        show-overflow-tooltip>
      </el-table-column>
      
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column> 

  </el-table>
    
    <!-- 分页插件 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 25, 30]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalinfo">
    </el-pagination>

  </div>
</template>

<script>
export default {
      data(){
        return{
          //模态框是否可见
          dialogVisible:false,
          //控制是否是新增或者是修改,默认是新增
          isAddorEdit:true,
          //当前页面
          currentPage:1,
          //总记录数
          totalinfo:100,
          //搜索框信息
          searchinfo:'',
          //批量删除的数据
          buchData:[],
          //模态框数据
          form:{
            date:'',
            name: '',
            sex:'',
            address:''
          },
        //表单数据
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          sex: '男',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: 'lisa',
          sex: '男',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '鸡哥',
          sex: '男',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '傻逼',
          sex: '男',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '杰哥',
          sex: '男',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '小明',
          sex: '男',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '张三',
          sex: '男',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        
        //校验数据
        rules:{
          name:[{required:true ,message:'请输入名字',trigger:'blur'}],
          sex:[{required:true ,message:'请输入性别',trigger:'blur'}],
          address:[{required:true ,message:'请输入地址',trigger:'blur'}],
          date:[{required:false ,message:'请输入出生日期',trigger:'blur'}]
        }
        }
      },
      methods:{
        addUser(){
          //模态框是否可见
          this.dialogVisible =true 
          //是新增
          this.isAddorEdit = true 
          
        },
        //编辑数据
        handleEdit(index,row){
          //模态框可见
          this.dialogVisible = true
          //确认按钮为修改
          this.isAddorEdit = false 
          this.form = row

        },
        AddOrEdit(){           
          this.$refs.form.validate((res)=>{

            //表示校验通过
              if(res){
                //在判断是新增还是修改
                if(this.isAddorEdit){
                  //表示新增
                  //发送post请求，添加用户
                 this.tableData.push(this.form)
                
                 this.dialogVisible=false
                
                 this.$message("新增成功！")
                 //把表单数据清除
                // this.handleClose()
                }
              else{
                  //是修改
                  //发送put请求，修改数据
                  //刷新
                  }
              }else{
                //表示校验未通过，不能关闭
              }
            })
            
           

         
             
            //实际是发送post请求，添加数据
            //刷新
            
           
          
        },
        handleDelete(index){
          // //console.log(index);
          //    //发送delte请求，删除用户
          //  const flag = this.$confirm('确认要删除吗？')
          //  console.log(flag);
          //     this.tableData.splice(index,1)
          
        this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(index,1)

          this.$message({
            type: 'success',
            message: '删除成功!'
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
        },
       //当弹窗关闭的时候调用，清除表单数据
        handleClose(){
           this.$refs.form.resetFields()
           this.dialogVisible=false
        },
        //当前页面改变时触发
        handleCurrentChange(){
           //查询当前页的数据 currentPage, size
        },
        //当前页面记录尺寸改变时触发
        handleSizeChange(){
          //改变尺寸查询数据返回
        },
        //搜索框查询信息
        search(){
           //发送get请求查询信息: 参数:searchinfo
        },
        //批量删除
        buchDelete(){
          //把记录下来的信息都传入,后端根据信息删除,一般是id

        },
        //选择框选中时触发
        handleSelectionChange(){
             //console.log('触发')

        }  ,
        //批量删除添加
        addBuch(index,row){
        const color  =  document.getElementById(index).style.backgroundColor
        
        //   //如果没选
          if( color != 'skyblue'){
            document.getElementById(index).style.backgroundColor = 'skyblue'
            this.buchData.push(row)
          }else{
            //已经选了,再删除该数据
            document.getElementById(index).style.backgroundColor ='white'
             const val =this.buchData.findIndex( item =>{ item.name == row.name })
             this.buchData.splice(val,1)
             console.log(this.buchData);
          }
        },
            
       
        addAll(){
          console.log("addall");
        }
        //返回索引
        // indexMethod(){
        //     return index*1;
        // }    
        }
      
      }

</script>

<style lang="less" scoped>
   
   .el-table{
     margin-top: 20px;

     //color:rgb(49, 138, 222)
   }
   .header{
      display: flex;
      .el-input{
       
         width:200px
      }
      .search{
        margin-left: 350px;
       
      }
   }
  .checkbox{
    width:15px;
    height:15px;
    border:1px solid black

  
  }
</style>